<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
   
	<meta name="apple-mobile-web-app-capable" content="yes"> 
	<meta http-equiv="Cache-Control" content="no-cache">
    <meta name="browsermode" content="application"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/> 
    <meta content="yes" name="apple-touch-fullscreen"/> 
    <meta content="telephone=no,email=no" name="format-detection"/> 
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/> 
    <title>日历</title>
    <link rel="stylesheet" type="text/css" href="themes/style/style.css">
    <script>!function(){var e="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",d=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(d),d.styleSheet){d.styleSheet.disabled||(d.styleSheet.cssText=e)}else{try{d.innerHTML=e}catch(f){d.innerText=e}}}();</script> <script>!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>750&&(a=750*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("将根据已有的meta标签来设置缩放比例");var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));
	</script>
    <script src="themes/js/jquery.min.js"></script>
    <script src="themes/js/touch.js"></script>
</head>
<body>
<div class="small-calendar">
	<div class="small-calendar-hader">
    	<div class="nickname">SMALL</div>
        <div class="lunar">
        	<label class="lunar-ymd"></label>
        	<label class="lunar-nymd"></label>
        </div>
        <div class="set-day"></div>
    </div>
    <div class="small-calendar-week">
    	<span>日</span>
    	<span>一</span>
    	<span>二</span>
    	<span>三</span>
    	<span>四</span>
    	<span>五</span>
    	<span>六</span>
    </div>
    <div class="small-calendar-table">
    </div>
</div>
<div class="small-schedule">
	<ul class="schedule-items">
    	
    	
    	<li class="schedule-item">
        	<div class="item-tail"></div>
            <div class="item-grail color-f49d12"><label>李岸松</label></div>
            <div class="item-boxs">
            	<div class="item-box-head">
                	<div class="item-left">
                        <div class="item-time">11:00-16:00</div>
                        <div class="item-nickname">李岸松</div>
                    </div>
                    <div class="item-right">
                        <div class="item-activity">娱乐活动</div>
                        <div class="item-express c-important">重要</div>
                    </div>
                </div>
                <div class="item-box">
                	<p class="item-info">他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一</p>
                    <div class="item-message"><a href="">12</a>评</div>
                </div>
            </div>
        </li>        
    	<li class="schedule-item">
        	<div class="item-tail"></div>
            <div class="item-grail color-0172b7"><label>李岸松</label></div>
            <div class="item-boxs">
            	<div class="item-box-head">
                	<div class="item-left">
                        <div class="item-time">11:00-16:00</div>
                        <div class="item-nickname">李岸松</div>
                    </div>
                    <div class="item-right">
                        <div class="item-activity">娱乐活动</div>
                        <div class="item-express c-important">重要</div>
                    </div>
                </div>
                <div class="item-box">
                	<p class="item-info">他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一</p>
                    <div class="item-message"><a href="">12</a>评</div>
                </div>
            </div>
        </li>
        <li class="schedule-item">
        	<div class="item-tail"></div>
            <div class="item-grail color-605ca9"><label>李岸松</label></div>
            <div class="item-boxs">
            	<div class="item-box-head">
                	<div class="item-left">
                        <div class="item-time">11:00-16:00</div>
                        <div class="item-nickname">李岸松</div>
                    </div>
                    <div class="item-right">
                        <div class="item-activity">娱乐活动</div>
                        <div class="item-express c-important">重要</div>
                    </div>
                </div>
                <div class="item-box">
                	<p class="item-info">他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一</p>
                    <div class="item-message"><a href="">12</a>评</div>
                </div>
            </div>
        </li>
        <li class="schedule-item">
        	<div class="item-tail"></div>
            <div class="item-grail color-01c2ef"><label>李岸松</label></div>
            <div class="item-boxs">
            	<div class="item-box-head">
                	<div class="item-left">
                        <div class="item-time">11:00-16:00</div>
                        <div class="item-nickname">李岸松</div>
                    </div>
                    <div class="item-right">
                        <div class="item-activity">娱乐活动</div>
                        <div class="item-express c-important">重要</div>
                    </div>
                </div>
                <div class="item-box">
                	<p class="item-info">他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一</p>
                    <div class="item-message"><a href="">12</a>评</div>
                </div>
            </div>
        </li>
    </ul>
    <div class="set-day fixed-day"><label>今</label></div>
    <div class="fixed-add"></div>
</div>
<script src="themes/js/calendar.js"></script>
<script type="text/javascript">
	/*模拟数据
		express ： 0 重要，1 公开，2 紧要
	*/
	var calendarData = [{
		id:1,
		nickname:'李岸松'	,
		starttime:'11:00',
		endtime:'16:00',
		info:'他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。',
		message:'12',
		activity:'娱乐活动',
		grail:'color-f49d12',
		express:0
	},{
		id:2,
		nickname:'李3松'	,
		starttime:'13:00',
		endtime:'16:00',
		info:'44444都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。',
		message:'1',
		activity:'娱乐活动',
		grail:'color-0172b7',
		express:1
	},{
		id:3,
		nickname:'李2松'	,
		starttime:'10:00',
		endtime:'15:00',
		info:'444445555。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。',
		message:'11',
		activity:'娱乐活动',
		grail:'color-605ca9',
		express:2
	},{
		id:4,
		nickname:'李4松'	,
		starttime:'14:00',
		endtime:'15:00',
		info:'4444。他的行为一切都是公开的。他的行为一切都是公开的。他的行为一切都是公开的。',
		message:'15',
		activity:'重要活动',
		grail:'color-01c2ef',
		express:2
	}];
	$(function(){
		
		
		var small_calendar_height = $(".small-calendar").height()+"px";
		$(".schedule-items").animate({"margin-top":"7.44rem"},100);
		
		function setCalendar(y,m,d){
			var lunar = calendar.solar2lunar(y,m,d?'1':'');
			var allday = 0,//总共多少天，0开始
			isLocking = $(small_calendar_table).hasClass("locking")?true:false;//获取骨架父级是否缩小了
			isday7=isLocking?'style="display: none;"':'style="display: block;"',//获取日历是否缩小状
			theDay7Index = $(small_calendar_table).find(".day7:visible").index();//显示的index态;
			if(theDay7Index==5){
				var daytd = '<div class="day42"><div class="day7">';//定义日历结构骨架	
			}else{
				var daytd = '<div class="day42"><div class="day7" '+isday7+'>';//定义日历结构骨架	
			}
			
			var nlunar = calendar.solar2lunar(lunar.cYear,lunar.cMonth,1)//获取当月第一信息
				nlunar_week = nlunar.nWeek,//获取当月第一天是星期几
				sDays = calendar.solarDays(parseInt(lunar.cMonth-1)<1?parseInt(lunar.cYear-1):lunar.cYear,parseInt(lunar.cMonth-1)<1?12:parseInt(lunar.cMonth-1));//获取上月多少天
			var theMonthDays = calendar.solarDays(lunar.cYear,lunar.cMonth)+((nlunar_week==7)?0:nlunar_week);//获取当前日历结构本月+上月多少天
			var minFor = 1; //本月+上月 会遍历几个day7
			if(nlunar_week!=7){		
				for(var j=nlunar_week-1;j>=0;j--){
					daytd+="<span class='month-prev cday' data-time='"+lunar.cYear+","+parseInt(lunar.cMonth-1)+","+parseInt(sDays-j)+"'><label>"+parseInt(sDays-j)+"</label></span>";
					allday++;
					if(allday%7==0) {
						minFor++;
						daytd += '</div><div class="day7" '+isday7+'>';
					};	
				}//循环如果本月不是周日 上月得天数	
			}
			for(var i=1;i<=calendar.solarDays(lunar.cYear,lunar.cMonth);i++){
				var tDate = new Date(),tYear = tDate.getFullYear(),tMonth = tDate.getMonth(),tDay = tDate.getDate();//获取当前月
				//判断是不是选中的那个日期，是就高亮
				if(lunar.cMonth==tMonth+1&&lunar.cYear==tYear&&i==tDay){
					if(d){
						daytd+="<span class='cday' data-time='"+lunar.cYear+","+lunar.cMonth+","+i+"'><label class='theday'>"+i+"</label></span></span>";
					}else{
						daytd+="<span class='cday' data-time='"+lunar.cYear+","+lunar.cMonth+","+i+"'><label class='theday on'>"+i+"</label></span></span>";	
					}
				}else{
					console.log(d);
					if(i==d){
						daytd+="<span class='cday' data-time='"+lunar.cYear+","+lunar.cMonth+","+i+"'><label class='on'>"+i+"</label></span></span>";	
					}else{
						daytd+="<span class='cday' data-time='"+lunar.cYear+","+lunar.cMonth+","+i+"'><label>"+i+"</label></span></span>";		
					}	
				}
								
				allday++;
				if(allday%7==0&&allday==42){
					daytd += '</div>';
				}
				else if(allday%7==0) {
					minFor++;
					//逆向滑动 
					if(theDay7Index==0&&minFor==parseInt(theMonthDays/7)){
						daytd += '</div><div class="day7">';
					}else{
						daytd += '</div><div class="day7" '+isday7+'>';
					}
				}
			}//循环本月得天
			if(allday<42){
				var endday = parseInt(42-allday);//获取剩余几天的结构
				for(var k = 1;k<=endday;k++){
					if(parseInt(lunar.cMonth+1)<12){
					daytd+="<span class='month-next cday' data-time='"+lunar.cYear+","+parseInt(lunar.cMonth+1)+","+k+"'><label>"+k+"</label></span>";
					}else{
						daytd+="<span class='month-next cday' data-time='"+parseInt(lunar.cYear+1)+",1,"+k+"'><label>"+k+"</label></span>";
					}
					allday++;
					if(allday%7==0&&allday==42) daytd += '</div>';
					else if(allday%7==0){
						daytd += '</div><div class="day7" '+isday7+'>';
					}
				}	
			}
			daytd += '</div>';//骨架结束
			
			$(".small-calendar-table").html(daytd);
			if(isLocking){
				//判断是不是当月
				if($(".small-calendar-table").find(".theday").length>0){
					//判断是不是点的 今天按钮
					if($(".set-day:visible").length>0){
						$(".small-calendar-table").find(".day7:visible").find(".cday:eq(0)").find("label").addClass("on").parent(".cday").siblings().find("label").removeClass("on").parent(".cday").parent(".day7").siblings().find("label").removeClass("on");	
					}else{
						$(".small-calendar-table").find(".theday").addClass("on").parent(".cday").parent(".day7").show().siblings(".day7").hide();
					}
				}else{
					if($(".small-calendar-table").find(".day7 label.on").length>0){
						$(".small-calendar-table").find(".day7 label.on").parent(".cday").parent(".day7").show().siblings().hide();
					}else{
						$(".small-calendar-table").find(".day7:visible").find(".cday:eq(0)").find("label").addClass("on").parent(".cday").siblings().find("label").removeClass("on").parent(".cday").parent(".day7").siblings().find("label").removeClass("on");	
					}
				}
			}
			
			var onTime = $(".small-calendar-table").find("label.on").parent(".cday").data("time").split(',')
				onLunar =  calendar.solar2lunar(onTime[0],onTime[1],onTime[2]);//获得高亮的日期			
			var lunar_ymd_html = onLunar.cYear+"年"+onLunar.cMonth+"月"+onLunar.cDay+"日",//获得阳历的年月日
				lunar_nymd_html = onLunar.gzYear+"("+onLunar.Animal+")"+onLunar.IMonthCn+onLunar.IDayCn;//获得农历得年月日
			$(".lunar-ymd").html(lunar_ymd_html).data("time",onLunar.cYear+","+onLunar.cMonth+","+onLunar.cDay+",");
			$(".lunar-nymd").html(lunar_nymd_html);	
		}
		
		setCalendar();//起始绘制日历
		
		document.querySelector(".small-calendar-table").adde   
		//日历点击事件
		$(document).on("click","span.cday",function(e){
			e.preventDefault();
			var that = $(this),//当前点击this对象
			date=that.data("time").split(',');//获取日期
			var tDate = new Date(),tYear = tDate.getFullYear(),tMonth = tDate.getMonth(),tDay = tDate.getDate();//获取当前月
			if(date[0]==tYear&&date[1]==tMonth&&date[2]==tDay){
				$(".set-day").hide();
			}else{
				$(".set-day").show();
			}
			var lunar = calendar.solar2lunar(date[0],date[1],date[2]);//根据当前日期查询对应得阳历和农历数据
			if(that.hasClass("month-next")||that.hasClass("month-prev"))//判断是不是上月和下月
			setCalendar(date[0],date[1],date[2]);	//重绘日历
			var lunar_ymd_html = lunar.cYear+"年"+lunar.cMonth+"月"+lunar.cDay+"日",
				lunar_nymd_html = lunar.gzYear+"("+lunar.Animal+")"+lunar.IMonthCn+lunar.IDayCn;
				that.find("label").addClass("on").parent(".cday").siblings().find("label").removeClass("on").parent(".cday").parent(".day7").siblings().find("label").removeClass("on");//当前高亮，移除其他高亮
				$(".lunar-ymd").html(lunar_ymd_html);
				$(".lunar-nymd").html(lunar_nymd_html);
			loadingData(0);			
		});
		//回到今天 点击事件
		$(".set-day").on("click",function(){
			$(".set-day").hide();
			setCalendar();
			loadingData(1);		
		});
		var ismini = document.getElementsByTagName("body").getAttributeNode("ismini").nodeValue;
		var small_calendar_table = document.querySelector(".small-calendar-table");//获取日历对象
		var swipecallback = function(ev,type){
				ev.preventDefault();
				
				var tDate = $(".lunar-ymd").data('time').split(','),//获取选中当月的时间
				isLocking=$(small_calendar_table).hasClass("locking")?true:false;//获取日历是否缩小状态
				$theDay7 = $(small_calendar_table).find(".day7:visible");//获取当前显示行
				switch(type){
					case "right":
						if(!isLocking){
							setCalendar(parseInt(tDate[1])-1<1?parseInt(tDate[0])-1:tDate[0],parseInt(tDate[1])-1<1?12:parseInt(tDate[1])-1,1);//计算时间
						}else{
							if($theDay7.index()==0)
							setCalendar(parseInt(tDate[1])-1<1?parseInt(tDate[0])-1:tDate[0],parseInt(tDate[1])-1<1?12:parseInt(tDate[1])-1,1);//计算时间
							else
							$theDay7.hide().prev().show().find(".cday:eq(0)").find("label").addClass("on").click();
						}
					break;
					case "left":
						if(!isLocking){
							setCalendar(parseInt(tDate[1])+1>12?parseInt(tDate[0])+1:tDate[0],parseInt(tDate[1])+1>12?1:parseInt(tDate[1])+1,1);//计算时间
						}else{
							if($theDay7.index()==5)
							setCalendar(parseInt(tDate[1])+1>12?parseInt(tDate[0])+1:tDate[0],parseInt(tDate[1])+1>12?1:parseInt(tDate[1])+1,1);//计算时间
							else
							$theDay7.hide().next().show().find(".cday:eq(0)").find("label").addClass("on").click();
						}
					break;
					case "up":
						$(small_calendar_table).addClass("locking").find("label.on").parent(".cday").parent(".day7").siblings(".day7").slideUp(100);
						var small_calendar_height = $(".small-calendar").height()+"px";
						$(".schedule-items").animate({"margin-top":"3.7066rem"},100);
					break;
					case "down":
						$(small_calendar_table).removeClass("locking").find(".day7").slideDown(100);
						var small_calendar_height = $(".small-calendar").height()+"px";
						$(".schedule-items").animate({"margin-top":"7.44rem"},100);
					break;			
					default:;		
			}	
			return false;	
		},loadingData = function(date){
			var chedule_items = '';
			if(date==1){
			//if(calendarData.length>0){
				for(citem in calendarData){
					var item = calendarData[citem],expressval,expressc;
					switch(item.express){
						case 0:
							expressval='重要',expressc='c-important';
						break;
						case 1:
							expressval='公开',expressc='c-open';
						break;
						case 2:
							expressval='紧要',expressc='c-critical';
						break;
						default:;	
					}
					chedule_items  += ['<li class="schedule-item" data-id="'+item.id+'">',
						'	<div class="item-tail"></div>',
						'	<div class="item-grail '+item.grail+'"><label>'+item.nickname+'</label></div>',
						'	<div class="item-boxs">',
						'		<div class="item-box-head">',
						'			<div class="item-left">',
						'				<div class="item-time">'+item.starttime+'-'+item.endtime+'</div>',
						'				<div class="item-nickname">'+item.nickname+'</div>',
						'			</div>',
						'			<div class="item-right">',
						'				<div class="item-activity">'+item.nickname+'</div>',
						'				<div class="item-express '+expressc+'">'+expressval+'</div>',
						'			</div>',
						'		</div>',
						'		<div class="item-box">',
						'			<p class="item-info">'+item.info+'</p>',
						'			<div class="item-message"><a href="">'+item.message+'</a>评</div>',
						'		</div>',
						'	</div>',
						'</li>'].join("");	
				}
			}else{
				chedule_items=['<li class="schedule-item no-data-tips">',
					'<div class="item-boxs">',
						'<div class="item-box"><label>今日无日程安排</label></div>',
					'</div>',
				'</li>'].join("");
			}
			$(".schedule-items").html(chedule_items);	
		}//请求服务器加载dom
		
		$(small_calendar_table).swipe( {
			//Generic swipe handler for all directions
			swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			  swipecallback(event,direction);
			}
		 });
		
	});
</script>
</body>
</html>